<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1 class="text-3xl font-bold underline mt-[10px]">
      Hello world!
    </h1>
    <div class="mb-4">
      <el-button type="primary">Primary</el-button>
    </div>
    <CommonTable :columns="columns" :data="tableList" :total="total" @change-table-info="changeTableInfo"
      v-model:pageNumber="queryParams.pageNo" v-model:pageSize="queryParams.pageSize" stripe>
      <template #operation="{ row }">
        <el-button type="text">预览{{ row.label }}</el-button>
      </template>
    </CommonTable>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import CommonTable from '@/components/CommonTable/index.vue'
const columns = ref([
  {
    prop: 'name',
    label: '姓名',
    width: 180
  },
  {
    prop: 'age',
    label: '年龄',
    width: 100
  },
  {
    prop: 'address',
    label: '地址',
    minWidth: 200
  },
  {
    prop: 'operation',
    label: '操作',
    width: 200,
    slot: 'operation'
  }
])
const tableList = reactive([
  {
    name: 'John',
    age: 30,
    address: 'New York'
  },
  {
    name: 'Jane',
    age: 25,
    address: 'Los Angeles'
  },
  {
    name: 'Bob',
    age: 35,
    address: 'Chicago'
  }
])
const total = ref(3)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20
})
const changeTableInfo = (val) => {
  console.log(val)
}
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

.mt-5 {
  margin-top: 50px;
}
</style>
